<template>
  <cover-view :class="isIphoneX?'tabbar_box isIphoneX-footer':'tabbar_box'">
    <!-- 奶茶 -->
    <cover-view  class="footer_box">
      <cover-view class="footer">
        <cover-view
        
        :class="tabBarIndex==index ? 'text on' : 'text'" 
        v-for="(item,index) in list"
        :key="index"
        @click="switchTab(index,item)">
          <cover-image class="img" :src="tabBarIndex==index ? item.selectedIconPath : item.iconPath" alt=""></cover-image>
          <cover-view class="wenzi">{{item.text}}</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>
 
<script>

export default {
  props:['tabBarIndex'],
  data() {
    return{
      isIphoneX: false,
      tabIndex:0,
      list: [
        {
          pagePath: '/pages/home/main',
          text: '首页',
          iconPath: '/static/images/tabBar/home.png',
          selectedIconPath:'/static/images/tabBar/home_hover.png',
        }, 
        {
          pagePath: '/pages/order/main',
          text: '订单',
          iconPath: '/static/images/tabBar/order.png',
          selectedIconPath:'/static/images/tabBar/order_hover.png',
        }, 
        {
          pagePath: '/pages/my/main',
          text: '我的',
          iconPath: '/static/images/tabBar/my.png',
          selectedIconPath:'/static/images/tabBar/my_hover.png',
        }
      ]
    }
  },
  methods: {
    /*
    *功能：底部栏目切换
    *开发人员：LRS
    *日期：2020.10.14
    * */
    switchTab(index,item){
        const url = item.pagePath
        wx.switchTab({ url })
    },
  },
  onHide() {},
  onLoad() {

    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 14") != -1 ||
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneX = true
        } else {
          this.isIphoneX = false
        }
      },
    });
  },
  onUnload() {},
  created() {}
};
</script>

<style  scoped>
.tabbar_box{
  width:100%;
  height: 110rpx;
  position: fixed;
  z-index: 50;
  bottom:0;
  background: #fff;
  border-top:1px solid #E4E4E4;

}
.footer_box{
  width:100%;
  background: #fff;
  
}
.footer_box .footer{
  width:100%;
  display: flex;
  height:110rpx;
  justify-content: space-between;
  align-items:center;
  /* box-shadow: 10rpx 10rpx 10rpx 16rpx #f2f3f7; */
  z-index: 99999;
  text-align: center;
}
.footer_box .footer .text .img{
    width: 48rpx;
    height: 48rpx;
    margin-bottom:10rpx;
    margin:0 auto;
}
.footer_box .footer .text{
  width:25%;
  text-align: center;
  font-size:21rpx;
  color:#919aa7
}
.on{
  pointer-events:none;
}
.on .wenzi{
  color:#222222;
}
.isIphoneX-footer {
  padding-bottom: 50rpx;
}
</style>
